<template>
  <div class="data-profiling-div">
    <!-- <div class="serach-div">
      <a-form layout="inline" :form="form">
        <a-form-item label="当前所在店铺">
          <a-select
            style="width: 200px"
            v-model="form.shopId"
            placeholder="请选择"
            :options="shopListOptions" />
        </a-form-item> 
        <a-form-item>
          <a-button type="primary" @click="changeShop">搜索</a-button>
        </a-form-item>
      </a-form>
    </div> -->
    <div class="overview-div">
      <div class="data-title">
        <span class="title">实时概况</span>
        <span class="more"><span class="time">{{ currentTime }}</span><a-button type="primary" @click="refreshOverview">刷新</a-button></span>
      </div>
      <div class="data-content">
        <div class="left">
          <div class="top">
            <paymentAmountCard :title="leftData.title" :counts="leftData.counts" :precision="leftData.precision" :styleName="leftData.style" :icon="leftData.icon" />
          </div>
          <div class="bottom">
            <paymentAmountChart
              :xData="paymentAmountXData"
              :legendData="paymentAmountLegendData"
              :seriesData="paymentAmountSeriesData" />
          </div>
        </div>
        <div class="right">
          <paymentAmountCard v-for="(item, index) in rightData" :key="index" :title="item.title" :counts="item.counts" :precision="item.precision" :icon="item.icon" />
        </div>
      </div>
    </div>
    <div class="window-div">
      <a-tabs :activeKey="activeKey" @change="tabsChange">
        <div slot="tabBarExtraContent">
          <TabDateTool @change="getTabDateType" @submit="getTabDateToolResult" />
        </div>
        <a-tab-pane :key="'1'" :tab="'运营视窗'">
          <div class="overall-chart">
            <div class="data-title">
              <span class="title">整体看板</span>
            </div>
            <div class="data-content">
              <div class="top">
                <div class="scroll-x">
                  <overallCard class="check-card" v-for="(item, index) in overallData" :key="index" :dateType="dateType" :choosen="overallLegend" :data="item" @submit="getOverallResult" />
                </div>
              </div>
              <div class="bottom">
                <div class="right-tool">
                  <span>{{ overallLegend.length }}/{{ overallData.length }}</span><a-button type="link" @click="resetOverall">重置</a-button>
                </div>
                <overallChart
                  ref="overallChartRef"
                  :xData="overallXData"
                  :choosen="overallLegend"
                  :legendData="overallLegendData"
                  :seriesData="overallSeriesData"
                  @submit="setOverallLegend" />
              </div>
            </div>
            
          </div>
          <div class="flow-chart">
            <div class="data-title">
              <span class="title">流量看板</span>
            </div>
            <div class="data-content">
              <div class="top">
                <div class="flow-chart-item" v-for="(item, index) in flowTopData" :key="index">
                  <overallCard :dateType="dateType" :hasChoose="false" :data="item" />
                  <flowChart
                    ref="flowChartRef"
                    :xData="overallXData"
                    :legendData="[ item.title ]"
                    :seriesData="item.seriesData"/>
                </div>
              </div>
              <div class="bottom">
                <div class="flow-chart-item" v-for="(item, index) in flowBottomData" :key="index">
                  <overallCard :dateType="dateType" :hasChoose="false" :isCircle="true" :data="item" />
                </div>
              </div>
            </div>
          </div>
          <div class="goods-chart">
            <div class="data-title">
              <span class="title">商品看板</span>
            </div>
            <div class="data-content">
              <div class="scroll-x">
                <div class="goods-chart-item" v-for="(goodsChartItem, index) in goodsChartData" :key="index">
                  <div class="title"><span>{{ goodsChartItem.title }}</span></div>
                  <div class="list">
                    <div class="list-item header">
                      <div class="index">排名</div>
                      <div class="goods-info">商品</div>
                      <div class="end">{{ goodsChartItem.orderName }}</div>
                    </div>
                    <div class="list-body">
                      <template v-if="goodsChartItem.list">
                        <div :class="['list-item', itemIndex == 0 && 'first', itemIndex == 1 && 'second', itemIndex == 2 && 'third']" v-for="(item, itemIndex) in goodsChartItem.list" :key="itemIndex">
                          <div class="index"><span>{{ itemIndex+1 }}</span></div>
                          <div class="goods-info">
                            <span v-if="item.img" :style="{ backgroundImage: 'url('+(item.img).split(',')[0]+')' }"></span>
                            <p>{{ item.goodsName }}</p>
                          </div>
                          <div class="end" v-if="goodsChartItem.isPrice">{{ (Number(item.number)/100).toFixed(2) }}</div>
                          <div class="end" v-else>{{ item.number }}</div>
                        </div>
                      </template>
                      <template v-else>
                        <a-empty style="margin-top: 100px" />
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <!-- <a-tab-pane :key="'2'" :tab="'管理视窗'">
          <div class="overall-chart"></div>
          <div class="flow-chart"></div>
          <div class="goods-chart"></div>
        </a-tab-pane> -->
      </a-tabs>
    </div>
  </div>
</template>

<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  GridComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';
import moment from 'moment'
import TabDateTool from '@components/form/TabDateTool'
import paymentAmountCard from './components/paymentAmountCard'
import paymentAmountChart from './components/paymentAmountChart'
import overallCard from './components/overallCard'
import overallChart from './components/overallChart'
import flowChart from './components/flowChart'

use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  LegendComponent
]);

export default {
  name: 'dataProfiling',
  components: {
    VChart,
    TabDateTool,
    paymentAmountCard,
    paymentAmountChart,
    overallCard,
    overallChart,
    flowChart
  },
  data() {
    return {
      shopListOptions: [
        { label:'所有店铺', value:0 }
      ],
      timer: '', // 定时器
      currentTime: moment().format("YYYY-MM-DD HH:mm:ss"), // 当前时间
      leftData: { // 支付金额
        title: '支付金额（元）',
        counts: [{title: '今日', count: 0.00}, {title: '昨日', count: 0.00}],
        precision: 2,
        icon: require('@images/dataPanel/ssgk_zfje.png'),
        style: 'flex'
      },
      rightData: [ // 右侧数据
        {title: '支付人数', counts: {today: 0, yesterday: 0}, countsTitle: {today: '', yesterday: '昨日全天'}, icon: require('@images/dataPanel/ssgk_zfrs.png')},
        {title: '支付订单数', counts: {today: 0, yesterday: 0}, countsTitle: {today: '', yesterday: '昨日全天'}, icon: require('@images/dataPanel/ssgk_zfdds.png')},
        {title: '成功退款金额（元）', counts: {today: 0.00, yesterday: 0.00}, countsTitle: {today: '', yesterday: '昨日全天'}, precision: 2, icon: require('@images/dataPanel/ssgk_cgtkje.png')},
        {title: '客单价（元）', counts: {today: 0.00, yesterday: 0.00}, countsTitle: {today: '', yesterday: '昨日全天'}, precision: 2, icon: require('@images/dataPanel/ssgk_kdj.png')},
        {title: '访客数', counts: {today: 0, yesterday: 0}, countsTitle: {today: '', yesterday: '昨日全天'}, icon: require('@images/dataPanel/ssgk_fks.png')},
        {title: '浏览数', counts: {today: 0, yesterday: 0}, countsTitle: {today: '', yesterday: '昨日全天'}, icon: require('@images/dataPanel/ssgk_lls.png')}
      ],
      // 实时概况图表 x 轴数据
      paymentAmountXData: [ '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00' ],
      // 实时概况图表 图例 数据
      paymentAmountLegendData: [ '今日', '昨日' ],
      // 实时概况图表 数据集合
      paymentAmountSeriesData: [
        [],
        []
      ],
      // 日期类型
      dateType: 1,
      // 日期
      currentDate: moment().subtract(1, "days").format("YYYY-MM-DD"),
      // 整体看版 数据集合
      overallData: [
        {
          type: 1,
          title: '支付金额（元）',
          count: 0.00,
          precision: 2,
          firstValue: 0,
          firstUp: false,
          firstDown: false,
          secondValue: 0,
          secondUp: false,
          secondDown: false
        },
        {
          type: 2,
          title: '支付订单数',
          count: 0,
          firstValue: 0,
          firstUp: false,
          firstDown: false,
          secondValue: 0,
          secondUp: false,
          secondDown: false
        },
        {
          type: 3,
          title: '支付人数',
          count: 0,
          firstValue: 0,
          firstUp: false,
          firstDown: false,
          secondValue: 0,
          secondUp: false,
          secondDown: false
        },
        {
          type: 4,
          title: '客单价（元）',
          count: 0.00,
          precision: 2,
          firstValue: 0,
          firstUp: false,
          firstDown: false,
          secondValue: 0,
          secondUp: false,
          secondDown: false
        },
        {
          type: 5,
          title: '成功退款金额（元）',
          count: 0.00,
          precision: 2,
          firstValue: 0,
          firstUp: false,
          firstDown: false,
          secondValue: 0,
          secondUp: false,
          secondDown: false
        },
      ],
      // 整体看版 选中项
      overallLegend: [ 1 ],
      // 整体看版 x 轴数据
      overallXData: [],
      // 整体看版 图例 数据
      overallLegendData: [ '支付金额（元）', '支付订单数', '支付人数', '客单价（元）', '成功退款金额（元）' ],
      // 整体看版 数据集合
      overallSeriesData: [
        [],[],[],[],[]
      ],
      // 流量看版 上部数据集合
      flowTopData: [
        {
          title: '跳失率',
          count: 0.00,
          precision: 2,
          firstValue: 0,
          firstUp: false,
          firstDown: false,
          secondValue: 0,
          secondUp: false,
          secondDown: false,
          seriesData: [
            []
          ]
        },
        {
          title: '人均浏览量',
          count: 0.00,
          precision: 2,
          firstValue: 0,
          firstUp: false,
          firstDown: false,
          secondValue: 0,
          secondUp: false,
          secondDown: false,
          seriesData: [
            []
          ]
        },
        {
          title: '平均停留时长（秒）',
          count: 0.00,
          precision: 2,
          firstValue: 0,
          firstUp: false,
          firstDown: false,
          secondValue: 0,
          secondUp: false,
          secondDown: false,
          seriesData: [
            []
          ]
        }
      ],
      // 流量看版 下部数据集合
      flowBottomData: [
        {
          title: '商品详情访问转化',
          count: 0.00,
          precision: 2,
          firstValue: 0,
          firstUp: false,
          firstDown: false,
          secondValue: 0,
          secondUp: false,
          secondDown: false,
        },
        {
          title: '访问-加购转化率',
          count: 0.00,
          precision: 2,
          firstValue: 0,
          firstUp: false,
          firstDown: false,
          secondValue: 0,
          secondUp: false,
          secondDown: false,
        },
        {
          title: '访问-付款转化率',
          count: 0.00,
          precision: 2,
          firstValue: 0,
          firstUp: false,
          firstDown: false,
          secondValue: 0,
          secondUp: false,
          secondDown: false,
        }
      ],
      // 商品看版 数据集合
      goodsChartData: [
        {
          title: '访客榜',
          orderName: '访客数',
          list: []
        },
        {
          title: '浏览榜',
          orderName: '浏览数',
          list: []
        },
        {
          title: '销量榜',
          orderName: '支付件数',
          list: []
        },
        {
          title: '支付金额榜',
          orderName: '支付金额（元）',
          isPrice: true,
          list: []
        }
      ],
      activeKey: '1', // 当前活动tab
    };
  },
  computed:{
    userInfo(){
      return this.$store.getters.userInfo || {};
    },
    shopId(){
      return this.userInfo.shopId || '';
    }
  },
  created() {
    this.timer = setInterval(() => {
      this.currentTime = moment().format("YYYY-MM-DD HH:mm:ss")
    }, 1000);
    this.refreshOverview()
    setTimeout(() => {
      this.getTabDateToolResult({ value: this.currentDate, type: 1 })
    }, 5000)
  },
  mounted() {},
  methods: {
    moment,
    // 切换店铺
    changeShop() {},
    // 刷新实时概况
    refreshOverview() {
      this.getOverviewData()
      this.getOverviewChartData()
    },
    // 获取实时概况数据
    getOverviewData() {
      this.$post('/generalSituation/getRelTimeSituationData',
        { shopId: this.shopId },
        { baseURL: `${location.origin}/goldenhome/data/statistics/web/admin` }).then((res) => {
        if (res && res.returnCode == 1000) {
          let payAmount = res.dataInfo.payAmount
          let payNum = res.dataInfo.PayNum
          let orderNumber = res.dataInfo.orderNumber
          let repairs = res.dataInfo.repairs
          let unitPrice = res.dataInfo.unitPrice
          let visitors = res.dataInfo.visitors
          let browses = res.dataInfo.browses
          console.log(payNum)
          // 支付金额
          this.leftData.counts[0].count = payAmount.intraDay ? Number((Number(payAmount.intraDay)/100).toFixed(2)) : 0
          this.leftData.counts[1].count = payAmount.yesterday ? Number((Number(payAmount.yesterday)/100).toFixed(2)) : 0
          // 支付人数
          this.rightData[0].counts.today = payNum.intraDay ? Number(payNum.intraDay) : 0
          this.rightData[0].counts.yesterday = payNum.yesterday ? Number(payNum.yesterday) : 0
          // 订单量
          this.rightData[1].counts.today = orderNumber.intraDay ? Number(orderNumber.intraDay) : 0
          this.rightData[1].counts.yesterday = orderNumber.yesterday ? Number(orderNumber.yesterday) : 0
          // 退款金额
          this.rightData[2].counts.today = repairs.intraDay ? Number((Number(repairs.intraDay)/100).toFixed(2)) : 0
          this.rightData[2].counts.yesterday = repairs.yesterday ? Number((Number(repairs.yesterday)/100).toFixed(2)) : 0
          // 客单价
          this.rightData[3].counts.today = unitPrice.intraDay ? Number((Number(unitPrice.intraDay)/100).toFixed(2)) : 0
          this.rightData[3].counts.yesterday = unitPrice.yesterday ? Number((Number(unitPrice.yesterday)/100).toFixed(2)) : 0
          // 访客数
          this.rightData[4].counts.today = visitors.intraDay ? Number(visitors.intraDay) : 0
          this.rightData[4].counts.yesterday = visitors.yesterday ? Number(visitors.yesterday) : 0
          // 浏览量
          this.rightData[5].counts.today = browses.intraDay ? Number(browses.intraDay) : 0
          this.rightData[5].counts.yesterday = browses.yesterday ? Number(browses.yesterday) : 0
        }
      });
    },
    // 获取实时概况图表数据
    getOverviewChartData() {
      this.$post('/generalSituation/getHoursData',
        {
          shopId: this.shopId,
        },
        { baseURL: `${location.origin}/goldenhome/data/statistics/web/admin` })
      .then((res) => {
        if (res && res.returnCode == 1000) {
          let dataInfo = res.dataInfo
          let _this = this
          let arr = [ [], [] ]
          dataInfo.forEach((item, index) => {
            if(item.hours <= Number(moment().format("HH"))) {
              arr[0].push(item.intraDayAmount ? (Number(item.intraDayAmount)/100).toFixed(2) : 0)
            }
            arr[1].push(item.yesterdayAmount ? (Number(item.yesterdayAmount)/100).toFixed(2) : 0)
          })
          this.paymentAmountSeriesData = arr
        }
      });
    },
    // tab切换
    tabsChange(val) {
      this.activeKey = val
    },
    // 获取日期选择类型
    getTabDateType(data) {
      this.dateType = data
    },
    // 获取周 坑爹，moment返回的跟后端计算的不一致，不知道哪个是对的，以后端为主，不然数据有问题
    getYearWeek(a, b, c)  {   
      let date1 = new Date(a, parseInt(b) - 1, c),
      date2 = new Date(a, 0, 1),
      d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
      let week = Math.ceil((d + ((date2.getDay() + 1) - 1)) / 7);
      week = week > 9 ? `${week}` : `0${week}`;
      return `${new Date().getFullYear()}-${week}`;
    },
    // 获取日期选择结果
    getTabDateToolResult(data) {
      this.currentDate = data.value
      switch (this.dateType) {
        case 1:
          this.overallXData = []
          for(let i=0;i<30;i++){
            this.overallXData.unshift(moment(data.value).subtract(i, "days").format("MM-DD"))
          }
          break;
        case 2:
          this.overallXData = []
          // this.currentDate = moment(data.value).format("YYYY-WW")   //moment返回的
          this.currentDate = this.getYearWeek(...(data.value.split('-'))) //改成和后端一致的
          for(let i=0;i<12;i++){
            this.overallXData.unshift(moment(data.value).subtract(i, "weeks").format("YYYY-WW"))
          }
          break;
        case 3:
          this.overallXData = []
          for(let i=0;i<12;i++){
            this.overallXData.unshift(moment(data.value).subtract(i, "months").format("YYYY-MM"))
          }
          break;
        case 4:
          this.overallXData = []
          for(let i=0;i<4;i++){
            this.overallXData.unshift(moment(data.value).subtract(i, "Q").format("YYYY-[第]Q[季度]"))
          }
          break;
      }
      this.refreshOperationData()
    },
    // 重置 整体看版
    resetOverall() {
      this.overallLegend = [ 1 ]
      this.$refs.overallChartRef.defaultLegend()
    },
    // 获取 整体看版 选择项
    getOverallResult(data) {
      switch (data.type) {
        case 1:
          this.$refs.overallChartRef.changeLegend('支付金额（元）', data.value)
          break;
        case 2:
          this.$refs.overallChartRef.changeLegend('支付订单数', data.value)
          break;
        case 3:
          this.$refs.overallChartRef.changeLegend('支付人数', data.value)
          break;
        case 4:
          this.$refs.overallChartRef.changeLegend('客单价（元）', data.value)
          break;
        case 5:
          this.$refs.overallChartRef.changeLegend('成功退款金额（元）', data.value)
          break;
      }
      if(data.value){
        this.overallLegend.push(data.type)
      } else {
        this.overallLegend.splice(this.overallLegend.indexOf(data.type), 1);
      }
    },
    // 根据图表选中设置
    setOverallLegend(data) {
      this.overallLegend = data
    },
    // 刷新 运营视窗
    refreshOperationData() {
      // 整体看板
      this.getOverallData()
      // 流量看板
      this.getFlowData()
      // 图表
      this.overallSeriesData = [ [], [], [], [], [] ]
      this.flowTopData[0].seriesData = [ [] ]
      this.flowTopData[1].seriesData = [ [] ]
      this.flowTopData[2].seriesData = [ [] ]
      this.getOverallOrFlowChartData(1) // 支付金额
      this.getOverallOrFlowChartData(2) // 支付订单
      this.getOverallOrFlowChartData(3) // 支付人数
      this.getOverallOrFlowChartData(4) // 客单价
      this.getOverallOrFlowChartData(5) // 退款
      this.getOverallOrFlowChartData(6) // 跳失率
      this.getOverallOrFlowChartData(7) // 人均浏览量
      this.getOverallOrFlowChartData(8) // 平均时长
      // 商品看板
      this.getGoodsData('/goodsKanBan/getGoodsVisitorsList', 0) // 商品访客
      this.getGoodsData('/goodsKanBan/getGoodsBrowseList', 1) // 商品浏览
      this.getGoodsData('/goodsKanBan/getGoodsSellList', 2) // 商品销量
      this.getGoodsData('/goodsKanBan/getGoodsPayAmountList', 3) // 商品支付金额
    },
    // 获取整体看板数据
    getOverallData() {
      this.$post('/basicsKanBan/getBasicsKanBan',
        {
          shopId: this.shopId,
          statisticalPeriod: this.dateType,
          nowTime: this.currentDate
        },
        { baseURL: `${location.origin}/goldenhome/data/statistics/web/admin` })
      .then((res) => {
        if (res && res.returnCode == 1000) {
          let dataInfo = res.dataInfo
          this.setOverallOrFlowData(0, dataInfo.payAmount, 'overallData') // 支付金额
          this.setOverallOrFlowData(1, dataInfo.payOrder, 'overallData') // 支付订单
          this.setOverallOrFlowData(2, dataInfo.payNumber, 'overallData') // 	支付人数
          this.setOverallOrFlowData(3, dataInfo.unitPrice, 'overallData') // 客单价
          this.setOverallOrFlowData(4, dataInfo.refundAmount, 'overallData') // 退款金额
        }
      });
    },
    // 获取流量看板数据
    getFlowData() {
      this.$post('/flowKanBan/getFlowKanBan',
        {
          shopId: this.shopId,
          statisticalPeriod: this.dateType,
          nowTime: this.currentDate
        },
        { baseURL: `${location.origin}/goldenhome/data/statistics/web/admin` })
      .then((res) => {
        if (res && res.returnCode == 1000) {
          let dataInfo = res.dataInfo
          this.setOverallOrFlowData(0, dataInfo.Jump, 'flowTopData') // 跳失率
          this.setOverallOrFlowData(1, dataInfo.perBrowse, 'flowTopData') // 人均浏览量
          this.setOverallOrFlowData(2, dataInfo.browsTime, 'flowTopData') // 平均停留时长
          this.setOverallOrFlowData(0, dataInfo.goodsVisitors, 'flowBottomData') // 商品访问转化
          this.setOverallOrFlowData(1, dataInfo.addPurchase, 'flowBottomData') // 加购转化
          this.setOverallOrFlowData(2, dataInfo.payPeopleNum, 'flowBottomData') // 付款转化
        }
      });
    },
    // 获取 整体看版/流量看版 图表数据
    getOverallOrFlowChartData(type) {
      this.$post('/flowKanBan/getKanBanChartDate',
        {
          shopId: this.shopId,
          statisticalPeriod: this.dateType,
          nowTime: this.currentDate,
          chartType: type
        },
        { baseURL: `${location.origin}/goldenhome/data/statistics/web/admin` })
      .then((res) => {
        if (res && res.returnCode == 1000) {
          let dataInfo = res.dataInfo
          let _this = this
          dataInfo.forEach((item, index) => {
            switch (type) {
              case 1:
                _this.overallSeriesData[0].push(Number((Number(item.number)/100).toFixed(2)))
                break;
              case 2:
                _this.overallSeriesData[1].push(Number(item.number))
                break;
              case 3:
                _this.overallSeriesData[2].push(Number(item.number))
                break;
              case 4:
                _this.overallSeriesData[3].push(Number((Number(item.number)/100).toFixed(2)))
                break;
              case 5:
                _this.overallSeriesData[4].push(Number((Number(item.number)/100).toFixed(2)))
                break;
              case 6:
                _this.flowTopData[0].seriesData[0].push(Number(item.number))
                break;
              case 7:
                _this.flowTopData[1].seriesData[0].push(Number(item.number))
                break;
              case 8:
                _this.flowTopData[2].seriesData[0].push(Number(item.number))
                break;
            }
            
          })
        }
      });
    },
    // 放入 整体看版/流量看板 数据
    setOverallOrFlowData(index, data, type) {
      if(type == 'overallData' && (index == 0 || index == 3 || index == 4)) {
        this[type][index].count = data.number ? Number((Number(data.number)/100).toFixed(2)) : 0
      } else {
        this[type][index].count = data.number ? Number(data.number) : 0
      }
      this[type][index].firstValue = data.yesterdayCompared ? (data.yesterdayCompared != '0%' ? data.yesterdayCompared : '-') : '-'
      this[type][index].secondValue = data.weekCompared ? (data.weekCompared != '0%' ? data.weekCompared : '-') : '-'
      if(data.yesterdayComparedStatus == 'up') {
        this[type][index].firstUp = true
        this[type][index].firstDown = false
      } else if(data.yesterdayComparedStatus == 'down') {
        this[type][index].firstUp = false
        this[type][index].firstDown = true
      } else {
        this[type][index].firstUp = false
        this[type][index].firstDown = false
      }
      if(data.weekComparedStatus == 'up') {
        this[type][index].secondUp = true
        this[type][index].secondDown = false
      } else if(data.weekComparedStatus == 'down') {
        this[type][index].secondUp = false
        this[type][index].secondDown = true
      } else {
        this[type][index].secondUp = false
        this[type][index].secondDown = false
      }
    },
    // 获取商品看板数据
    getGoodsData(url, type) {
      this.$post(url,
        {
          shopId: this.shopId,
          statisticalPeriod: this.dateType,
          nowTime: this.currentDate
        },
        { baseURL: `${location.origin}/goldenhome/data/statistics/web/admin` })
      .then((res) => {
        if (res && res.returnCode == 1000) {
          let dataInfo = res.dataInfo
          switch (type) {
            case 0:
              this.goodsChartData[0].list = dataInfo
              break;
            case 1:
              this.goodsChartData[1].list = dataInfo
              break;
            case 2:
              this.goodsChartData[2].list = dataInfo
              break;
            case 3:
              this.goodsChartData[3].list = dataInfo
              break;
          }
        }
      });
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="less">
.scroll-x{
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.data-title{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .title{
    position: relative;
    font-size: 20px;
    color: #333;
    padding: 15px;
    &:after{
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
      width: 5px;
      height: 20px;
      background: #016BFF;
      border-radius: 5px;
    }
  }
  .more{
    display: flex;
    align-items: center;
    .time{
      width: 150px;
    }
    .ant-btn{
      margin-left: 10px;
    }
  }
}
.data-card{
  width: 100%;
  height: 140px;
  background: #FAFAFA;
  padding: 16px;
  margin-bottom: 8px;
  position: relative;
  .title{
    margin-bottom: 12px;
  }
  .icon{
    position: absolute;
    top: 0;
    right: 0;
    width: 66px;
    height: 66px;
    img{
      width: 100%;
    }
  }
  .counts{
    width: 100%;
    &.flex{
      display: flex;
      justify-content: space-between;
      .counts-item{
        position: relative;
        width: calc((100% - 30px) / 2);
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        .title{
          margin-left: 15px;
        }
        &:first-child{
          &::after{
            content: "";
            position: absolute;
            right: -14px;
            top: -15px;
            width: 1px;
            height: calc(100% + 30px);
            background: #E9E9E9;
          }
        }
      }
    }
    .counts-item{
      .title{
        color: #999;
      }
    }
  }
}
.chart-card{
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  padding: 16px;
  margin-right: 8px;
  border: 1px solid rgba(255, 255, 255, 0);
  &:last-child{
    margin: 0;
  }
  .card-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .card-body{
    .item{
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 26px;
      .label{
        color: #999;
      }
      .value{
        &.red{
          color: #EA3E3E;
        }
        &.green{
          color: #7CDB95;
        }
      }
      .icon img{
        width: 8px;
        height: 16px;
        margin-left: 8px;
      }
    }
  }
  &.check-card{
    width: 300px;
    height: 155px;
    border: 1px solid #E8E8E8;
    border-radius: 4px;
  }
  &.flex{
    display: flex;
    align-items: center;
    .left{
      flex: auto;
    }
    .right{
      display: flex;
      justify-content: flex-end;
      margin-left: 35px;
      width: 125px;
    }
  }
  &.active{
    border-color: #016BFF;
    background: #F5F9FF; 
  }
}
.overview-div{
  .data-content{
    display: flex;
    justify-content: space-between;
    .left{
      width: 60%;
      .top{
        height: 165px;
        margin-bottom: 12px;
      }
      .bottom{
        width: 100%;
        height: calc(100% - 160px);
      }
    }
    .right{
      width: calc(40% - 8px);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      &>div{
        width: calc((100% - 8px) / 2);
      }
    }
  }
}
.window-div{
  .overall-chart{
    .data-content{
      .top{
        margin-bottom: 16px;
      }
      .bottom{
        position: relative;
        height: 260px;
        .right-tool{
          position: absolute;
          top: 0;
          right: 0;
          z-index: 9;
          display: flex;
          align-items: center;
          span{
            cursor: default;
          }
        }
      }
    }
  }
  .flow-chart{
    margin-bottom: 16px;
    .top{
      display: flex;
      justify-content: space-between;
      height: 300px;
      margin-bottom: 8px;
      .chart-card{
        padding-bottom: 0;
        height: calc(100% - 150px);
      }
      .chart{
        width: 100%;
        height: 150px;
      }
    }
    .bottom{
      display: flex;
      justify-content: space-between;
      height: 125px;
    }
    .flow-chart-item{
      width: calc((100% - 16px) / 3);
      background: #FAFAFA;
      border-radius: 4px;
    }
  }
  .goods-chart{
    .goods-chart-item{
      flex-shrink: 0;
      width: 360px;
      height: 800px;
      background: #FAFAFA;
      border-radius: 4px;
      margin-right: 16px;
      padding: 16px;
      .list{
        height: calc(100% - 42px);
        .list-body{
          height: calc(100% - 44px);
          overflow-y: auto;
          &::-webkit-scrollbar{
            background: transparent;
          }
          &::-webkit-scrollbar-track{
            background: transparent;
          }
        }
      }
      .title{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 42px;
        background: #FFFFFF;
        border-radius: 4px;
        span{
          position: relative;
          font-size: 20px;
          &:before{
            content: "";
            position: absolute;
            top: 50%;
            left: -30px;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background: url('~@images/dataPanel/phb_left.png') no-repeat;
            background-size: 100% 100%;
          }
          &:after{
            content: "";
            position: absolute;
            top: 50%;
            right: -30px;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background: url('~@images/dataPanel/phb_right.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .list-item{
        display: flex;
        align-items: center;
        height: 50px;
        margin-bottom: 20px;
        &>div{
          font-size: 12px;
          display: flex;
          align-items: center;
          
        }
        .index{
          width: 26px;
          margin-right: 12px;
          justify-content: center;
          text-align: center;
          span{
            width: 20px;
            height: 20px;
            border-radius: 4px;
            line-height: 20px;
            text-align: center;
          }
        }
        .end{
          width: 80px;
          margin-left: 5px;
          justify-content: flex-end;
          text-align: right;
        }
        .goods-info{
          width: calc(100% - 123px);
          span{
            flex-shrink: 0;
            width: 50px;
            height: 50px;
            background-repeat: no-repeat;
            background-size: 100%;
            border-radius: 4px;
            overflow: hidden;
            margin-right: 10px;
          }
          p{
            flex-shrink: 0;
            width: calc(100% - 60px);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
          }
        }
        &.header{
          height: 44px;
          margin-bottom: 0;
        }
        &.first{
          .index span{
            background: linear-gradient(to bottom, #F1E1BF 0%, #DFC08A 100%);
          }
        }
        &.second{
          .index span{
            background: linear-gradient(to bottom, #E9E9E9 0%, #C5C5C5 100%);
          }
        }
        &.third{
          .index span{
            background: linear-gradient(to bottom, #ECC3A6 0%, #B98A64 100%);
          }
        }
      }
      &:last-child{
        margin: 0;
      }
      
    }
  }
}
</style>
